<template>
	<div class="magazine">
		<div class="search">
			<span>按日期搜索:</span>
			<div>
				<el-select v-model="value1" placeholder="请选择" style="width: 150px;" @change="changeYears" clearable>
					<el-option label="全部年份" value="选项0"></el-option>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div>
				<el-select v-model="value2" placeholder="请选择" style="width: 150px;" @change="changeMonths"  clearable>
					<el-option label="全部月份" value="0"></el-option>
					<el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>

			<div class="searchBtn" @click="searchBtn">搜索</div>
		</div>
		<div class="books">
			<book v-for="(item,i) in this.magazineAll.records" :key="item.id" :books="item"></book>
		</div>

		<div class="pages">

			<el-pagination @current-change="curentPage" background layout="prev, pager, next" :total="this.magazineAll.pages*10">
			</el-pagination>

		</div>

		<footerA></footerA>

	</div>
</template>

<script>
	import book from '../../components/magazine/book.vue'
	// import data from '../../../public/data.json'
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		name: 'Magazine',
		components: {
			book
		},
		data() {
			return {
				months: [{
						value: '1',
						label: '12月'
					}, {
						value: '2',
						label: '11月'
					}, {
						value: '3',
						label: '10月'
					}, {
						value: '4',
						label: '9月'
					}, {
						value: '5',
						label: '8月'
					}, {
						value: '6',
						label: '7月'
					}, {
						value: '7',
						label: '6月'
					}, {
						value: '选8',
						label: '5月'
					}, {
						value: '9',
						label: '4月'
					}, {
						value: '10',
						label: '3月'
					},
					{
						value: '11',
						label: '2月'
					}, {
						value: '12',
						label: '1月'
					}
				],
				options: [{
						value: '选项1',
						label: '2019年'
					}, {
						value: '选项2',
						label: '2018年'
					}, {
						value: '选项3',
						label: '2017年'
					}, {
						value: '选项4',
						label: '2016年'
					}, {
						value: '选项5',
						label: '2015年'
					}, {
						value: '选项6',
						label: '2014年'
					}, {
						value: '选项7',
						label: '2013年'
					}, {
						value: '选项8',
						label: '2012年'
					}, {
						value: '选项9',
						label: '2011年'
					}, {
						value: '选项10',
						label: '2010年'
					},
					{
						value: '选项11',
						label: '2009年'
					}, {
						value: '选项12',
						label: '2008年'
					}, {
						value: '选项13',
						label: '2007年'
					}, {
						value: '选项14',
						label: '2006年'
					}, {
						value: '选项15',
						label: '2005年'
					}, {
						value: '选项16',
						label: '2004年'
					}, {
						value: '选项17',
						label: '2003年'
					}, {
						value: '选项18',
						label: '2002年'
					}, {
						value: '选项19',
						label: '2001年'
					}, {
						value: '选项20',
						label: '2000年'
					}, {
						value: '选项21',
						label: '1999年'
					}, {
						value: '选项22',
						label: '1998年'
					}, {
						value: '选项23',
						label: '1997年'
					}, {
						value: '选项24',
						label: '1996年'
					}, {
						value: '选项25',
						label: '1995年'
					},
					{
						value: '选项26',
						label: '1994年'
					}, {
						value: '选项27',
						label: '1993年'
					}, {
						value: '选项28',
						label: '1992年'
					}, {
						value: '选项30',
						label: '1991年'
					}, {
						value: '选项31',
						label: '1990年'
					}, {
						value: '选项32',
						label: '1989年'
					}, {
						value: '选项33',
						label: '1988年'
					}, {
						value: '选项34',
						label: '1987年'
					}, {
						value: '选项35',
						label: '1986年'
					}, {
						value: '选项36',
						label: '1985年'
					}, {
						value: '选项37',
						label: '1984年'
					}, {
						value: '选项38',
						label: '1983年'
					}, {
						value: '选项39',
						label: '1982年'
					}, {
						value: '选项40',
						label: '1981年'
					}
				],
				value1: '选项0',
				value2: '0',
				year:'',
				month:''
			}
		},
		computed: {
			...mapState(['magazineAll'])
		},
		mounted() {
			let canshu = {
				current: 1,
				year: "",
				month: "",
				size: 12
			}
			this.queryshuju(canshu)
				.then(resp => {
					// console.log(this.magazineAll)
					// console.log(resp)
				})


		},
		methods: {
			...mapActions(['queryshuju']),
			
			curentPage(val) {
				let canshu = {
					current: val,
					year: "",
					month: "",
					size: 12
				}
				this.queryshuju(canshu)
			},
			changeYears(val){
				// console.log(val)
				
				this.options.forEach(item=>{
					if(item.value == val){
						this.year = item.label.substring(0,item.label.length-1)
					}
				})
			},
			changeMonths(val){
				this.months.forEach(item=>{
					if(item.value == val){
						this.month = item.label.substring(0,item.label.length-1)
					}
				})
			},
			searchBtn(){
				console.log(this.year)
				console.log(this.month)
				let canshu = {
					current: 1,
					year: this.year,
					month: this.month,
					size: 12
				}
				this.queryshuju(canshu)
			}
			
            
		}

	}
</script>

<style scoped>
	.magazine {
		margin-top: 86px;
		box-shadow: 0 -10px 6px 3px rgb(245, 245, 245);
		text-align: center;
	}

	.search {
		margin-left: 8vw;
		width: 500px;
		height: 80px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 0.1px solid rgb(245, 245, 250);
	}

	.searchBtn {
		width: 80px;
		line-height: 40px;
		border: 1px solid #00B24F;
		border-radius: 5px;
		text-align: center;
		letter-spacing: 8px;
		color: #1FAF88;
	}

	.searchBtn:hover {
		background-color: #00B24F;
		color: white;
		cursor: pointer;

	}

	.books {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		

	}

	.pages {}
</style>
